<template>
  <div :style="styleColor" style="padding:0 5px">
    <div class="header">
      <div class="left">
          <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
          <span>执法档案</span>
      </div>
      <div class="right" @click="jump">
        <span>详情</span>
        <img class="imgJT" src="@/assets/images/bigViewIMG2/qinsejiantou.png" alt="">
      </div>
    </div>
    <!-- <div style="color:#fff;font-size:30px;line-height: 300px;">待开发。。。</div> -->
    <div id="radarMap" ref="radarMap" style=" width:100%;height:350px;overflow-x:hidden ;"></div>
  </div>
   
</template>

<script>
import echarts from 'echarts'
import { encrypt, decrypt } from '@/utils/AES.js'
import { reqFindLawEnforcementInfo } from '@/api/home/index.js'
export default {
  props: {    //仿照超链，props项保留
    value: Object,
    ispreview: Boolean
  },
  data(){
    return {
      options: {},
      radarMapData:{
        
      },


      warningDetailData: [
        {
          name: "审单",
         
        },
        {
          name: "查验",
         
        },
        {
          name: "稽查",
         
        },
        {
          name: "核查",
         
        },
        {
          name: "行政案件",
         
        },
        {
          name: "刑事案件",
         
        },
      ],
    }
  },
  watch: {
    radarMapData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    },
    $route: {
      handler(val) {
        if (val.query.reportCode == "SecondView") {
          this.getList()
        } else {
          return
        }


      },
      deep: true
    }
  },
  computed: {
    transStyle() {
      // console.log('??????????????????', this.objToOne(this.options))
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",

        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        // right: this.transStyle.right + "px"

      }
    }
  },
  created(){
    this.getList()
  },
  mounted(){
    this.options = this.value
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods:{
    jump(){
      let query = JSON.parse(decrypt(this.$route.query.key))
      this.$router.push({
        path: '/visual/thirdView/radarView',
        query: {
          key: encrypt(JSON.stringify({
            company: query.company,
             text: '执法档案',
              tradeCo: query.tradeCo
          }))
        }
      })
    },
     getList() {
      // console.log(this.$route.query.key);
      let query = JSON.parse(decrypt(this.$route.query.key))

      reqFindLawEnforcementInfo({ consignCode: query.tradeCo }).then((res)=>{
        this.radarMapData = res.data
        this.chart.hideLoading();
      }).catch(error=>{
        let { message } = error;
        if (message == "Network Error") {
          message = "当前网络不稳定，请稍后再试";
        }
        else if (message.includes("timeout")) {
          message = "当前网络不稳定，请稍后再试";
        }
        else if (message.includes("Request failed with status code")) {
          message = "当前网络不稳定，请稍后再试";
        }
        this.$message.error(message)
        this.chart.hideLoading();
      })
      // console.log(res)
      
      
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('radarMap'), null, { renderer: 'svg' })
      this.chart.showLoading({
        text: '',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0)',
      })
      // this.setOptions(this.radarMapData);
    },
    setOptions(list){
      let arrOne = []
      arrOne.push(list.documentReviewY)
      arrOne.push(list.checkDimensionY)
      arrOne.push(list.auditBL)
      arrOne.push(list.checkCountBL)
      arrOne.push(list.administrativeBL)
      arrOne.push(list.criminalCountBL)
      let arrTwo = []
      arrTwo.push(list.documentReviewSHY)
      arrTwo.push(list.checkDimensionSHY)
      arrTwo.push(list.checkAuditBL)
      arrTwo.push(list.checkCountSBL)
      arrTwo.push(list.administrativeCountBL)
      arrTwo.push(list.criminalCountSBL)
      // let maxList = []

      // maxList.push(list.auditCount)
      // maxList.push(list.checkCount)
      // maxList.push(list.administrativeCount)
      // maxList.push(list.criminalCount)
      // maxList.push(list.checkAuditSH)
      // maxList.push(list.checkCountSH)
      // maxList.push(list.administrativeCountSH)
      // maxList.push(list.criminalCountSH)
      // let max = Math.max.apply(null, maxList);
      // console.log(max);
      let _this = this
      this.chart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          show:true,
          formatter: function (params) {
            let relVal = params.name;
            let typeList = _this.warningDetailData
            // console.log(typeList);
            for (let i = 0; i < params.data.value.length; i++) {
             if(params.data.name=='干预值'){
                
                  if (typeList[i]['name'] == '审单') {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.documentReview + ' ' + '%';
                  }else if(typeList[i]['name'] == '查验'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkDimension + ' ' + '%';
                  }else if(typeList[i]['name'] == '稽查'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.auditCount + ' ' ;
                  }else if(typeList[i]['name'] == '核查'){
                     relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkCount + ' ';
                  }else if(typeList[i]['name'] == '行政案件'){
                      relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.administrativeCount + ' ' ;
                  }
                  else {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.criminalCount + ' ';
                  }
              }else {
                if (typeList[i]['name'] == '审单') {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.documentReviewSH + ' ' + '%';
                  }else if(typeList[i]['name'] == '查验'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkDimensionSH + ' ' + '%';
                  }else if(typeList[i]['name'] == '稽查'){
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkAuditSH + ' ' ;
                  }else if(typeList[i]['name'] == '核查'){
                     relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.checkCountSH + ' ';
                  }else if(typeList[i]['name'] == '行政案件'){
                      relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.administrativeCountSH + ' ' ;
                  }
                  else {
                    relVal += '<br/>' + typeList[i]['name'] + ' : '
                      + list.criminalCountSH + ' ';
                  }
              }

            }
            return relVal;
          }
        },
        legend: {
          top: 0,
          right: 20,
          itemWidth: 20,
          itemHeight: 12,
          data: ["干预值", "平均值"],
          textStyle: {
            color: "#fff",
          },
        },
        radar: {
          radius: "80%",
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              color: "#fff",
              opacity: 0.2,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#fff",
              opacity: 0.2,
            },
          },
          splitArea: {
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0,0,0,.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
            },
          },
          indicator: [
            {
              name: "审单",
              max: 100,
            },
            {
              name: "查验",
              max: 100,
            },
            {
              name: "稽查",
              max: 100,
            },
            {
              name: "核查",
              max: 100,
            },
            {
              name: "行政案件",
              max: 100,
            },
            {
              name: "刑事案件",
              max: 100,
            },
          ],
          triggerEvent: true
        },
        series: [
          {
            name: "",
            type: "radar",
            symbolSize: 5,
             "areaStyle": {
                "normal": {
                    "color": "rgba(245, 166, 35, 0.4)"
                }
            },
            itemStyle:{
                color:'rgba(245, 166, 35, 1)',
                borderColor:'rgba(245, 166, 35, 0.3)',
                borderWidth:10,
            },
            "lineStyle": {
                "normal": {
                    "type": "dashed",
                    
                    "color": "rgba(245, 166, 35, 1)",
                    "width": 2
                }
            },
            data: [
              {
                value: arrOne,
                name: "干预值",
              },
           
            ],
          },
            {
            name: "",
            type: "radar",
            symbolSize: 5,
              "itemStyle": {
                  "normal": {
                      color:'rgba(19, 173, 255, 1)',
                      "borderColor": "rgba(19, 173, 255, 0.4)",
                      "borderWidth": 10
                  }
              },
              "areaStyle": {
                  "normal": {
                      "color": "rgba(19, 173, 255, 0.5)"
                  }
              },
              "lineStyle": {
                  "normal": {
                      "color": "rgba(19, 173, 255, 1)",
                      "width": 2,
                      "type": "dashed"
                  }
              },
            data: [
             
              {
                value: arrTwo,
                name: "平均值",
              },
            ],
          },
        ],
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
      // backgroundColor: {
      //   type: "radial",
      //   x: 0.4,
      //   y: 0.4,
      //   r: 0.35,
      //   // colorStops: [
      //   //   {
      //   //     offset: 0,
      //   //     color: "#895355", // 0% 处的颜色
      //   //   },
      //   //   {
      //   //     offset: 0.4,
      //   //     color: "#593640", // 100% 处的颜色
      //   //   },
      //   //   {
      //   //     offset: 1,
      //   //     color: "#39273d", // 100% 处的颜色
      //   //   },
      //   //],
      //   globalCoord: false, // 缺省为 false
      // },
      });
    }
  }
  
};
</script>

<style scoped lang="scss">
// ::-webkit-scrollbar {
//    width: 0;
//    height: 0;
//    color: transparent;
//  }
.header {
  // padding: 0 5px;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;

  .left {
    display: flex;
    align-items: center;
    .headerIMG {
        width: 40px;
        height: 40px;
      }
    
      span {
        color: #fff;
        margin-left: 10px;
        font-size: 15px;
      }
  }
  .right {
    cursor: pointer;
    display: flex;
    margin-right: 10px;
    align-items: center;
    span {
      color: #00ffff;
      font-size: 15px;
    }
    .imgJT {
      margin-left: 10px;
      width: 12px;
      height: 12px;
    }
  }
}
</style>


